<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#ff5a00" />
    <link rel="manifest" href="/manifest.json" />
    <!-- 苹果触摸图标 -->
    <link rel="apple-touch-icon" sizes="180x180" href="/icon-192x192.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>火山爆发互动游戏（Polished · Vite7/R3F8）</title>
    <style>
      html, body, #root { height: 100%; margin: 0; background: #000; color: #fff; }
      .overlay { position: absolute; top: 12px; left: 12px; right: 12px; max-width: 420px;
                 background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.12);
                 border-radius: 16px; padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
      .title { font-size: 18px; font-weight: 700; }
      .desc { color: rgba(255,255,255,.8); font-size: 13px; margin-top: 4px; }
      .row { margin-top: 10px; } .row label { color: rgba(255,255,255,.8); font-size: 13px; display:block; } .row b { color:#fff; }
      .grid { display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:10px; }
      .btn { background: rgba(255,255,255,.1); color:#fff; border: 1px solid rgba(255,255,255,.12); padding: 8px 10px; border-radius: 12px; cursor: pointer; font-size: 13px; }
      .btn:hover { background: rgba(255,255,255,.18); }
      .check { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.8); font-size: 13px; grid-column: 1 / -1; }
      .hint { position:absolute; left:50%; transform: translateX(-50%); bottom:12px; background: rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.8); padding:6px 10px; border-radius:999px; font-size: 12px; }
      input[type=range] { width: 100%; }
    </style>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
